/<template>
  <div class="content">
    <div class="handle_tabel">
      <div class="handle_tabel_header">
        投诉详情
      </div>
      <div class="handle_tabel_bady">
        <div class="handle_tabel_bady_tr">
          <div class="handle_tabel_bady_tb">
            <div class="handle_tabel_bady_tb_key">
              小程序
            </div>
            <div class="handle_tabel_bady_tb_value">
              {{ rowInfo.mini_app_name }}
            </div>
          </div>
          <div class="handle_tabel_bady_tb">
            <div class="handle_tabel_bady_tb_key">
              投诉用户
            </div>
            <div class="handle_tabel_bady_tb_value">
              {{ rowInfo.member_id }}
            </div>
          </div>
        </div>
        <div class="handle_tabel_bady_tr">
          <div class="handle_tabel_bady_tb">
            <div class="handle_tabel_bady_tb_key">
              联系方式
            </div>
            <div class="handle_tabel_bady_tb_value">
              {{ rowInfo.mobile }}
            </div>
          </div>
          <div class="handle_tabel_bady_tb">
            <div class="handle_tabel_bady_tb_key">
              注册时间
            </div>
            <div class="handle_tabel_bady_tb_value">
              {{ rowInfo.reg_time }}
            </div>
          </div>
        </div>
        <div class="handle_tabel_bady_tr">
          <div class="handle_tabel_bady_tb">
            <div class="handle_tabel_bady_tb_key">
              投诉时间
            </div>
            <div class="handle_tabel_bady_tb_value">
              {{ rowInfo.feed_time }}
            </div>
          </div>
          <div class="handle_tabel_bady_tb">
            <div class="handle_tabel_bady_tb_key">
              投诉短剧
            </div>
            <div class="handle_tabel_bady_tb_value">
              {{ rowInfo.playlet_title }}
            </div>
          </div>
        </div>
        <div class="handle_tabel_bady_tr">
          <div class="handle_tabel_bady_tb">
            <div class="handle_tabel_bady_tb_key">
              投诉剧集
            </div>
            <div class="handle_tabel_bady_tb_value">
              {{ rowInfo.chapter_title }}
            </div>
          </div>
          <div class="handle_tabel_bady_tb">
            <div class="handle_tabel_bady_tb_key">
              投诉类型
            </div>
            <div class="handle_tabel_bady_tb_value">
              {{ rowInfo.type_name }}
            </div>
          </div>
        </div>
        <div class="handle_tabel_bady_tr">
          <div class="handle_tabel_bady_tb">
            <div class="handle_tabel_bady_tb_key">
              补充描述
            </div>
            <div class="handle_tabel_bady_tb_value">
              {{ rowInfo.describe }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-form
      ref="ruleForm"
      :model="form"
      :rules="rule"
      label-position="top"
    >
      <el-form-item
        prop="handle_status"
        label="处理状态"
      >
        <el-radio-group v-model="form.handle_status">
          <el-radio :label="1">已处理</el-radio>
          <el-radio :label="2">不处理</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="备注">
        <el-input
          v-model="form.remark"
          type="textarea"
          :autosize="{ minRows: 5, maxRows: 9}"
          placeholder="请输入内容"
          maxlength="100"
        >
        </el-input>
      </el-form-item>
    </el-form>
    <div class="dialog-footer rowFlex">
      <el-button
        class="btn"
        @click="close"
      >取 消</el-button>
      <el-button
        :loading="loading"
        class="btn"
        type="primary"
        @click="submit"
      >确 定</el-button>
    </div>
  </div>
</template>

<script>
import { handleSave } from '@/api/feedback'
export default {
  props: {
    rowInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      loading: false,
      form: {
        handle_status: '',
        remark: ''
      },
      rule: {
        handle_status: [{ required: true, message: '请选择处理状态', trigger: 'blur' }]
      }
    }
  },
  mounted() {
    console.log(this.rowInfo)
  },
  methods: {
    close() {
      this.$emit('cancel')
    },
    submit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          handleSave({
            id: this.rowInfo.id,
            ...this.form
          }).then((res) => {
            this.$emit('ok')
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  padding: 20px;
  .rowFlex {
    right: 0;
  }
  .handle_tabel {
    background: #ffffff;
    border: 1px solid #e5e6eb;
    border-bottom: none;
    margin-bottom: 16px;
    .handle_tabel_header {
      height: 46px;
      border-bottom: 1px #e5e6eb solid;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      font-size: 14px;
      color: #1d2129;
      line-height: 25px;
      text-align: left;
      font-style: normal;
    }
    .handle_tabel_bady {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .handle_tabel_bady_tr {
        width: 100%;
        border-bottom: 1px #e5e6eb solid;
        display: flex;
        justify-content: space-between;
        .handle_tabel_bady_tb {
          width: 50%;
          display: flex;
          flex: 1;
          .handle_tabel_bady_tb_key {
            width: 90px;
            min-height: 46px;
            background: #f2f3f5;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: 14px;
            color: #1d2129;
            line-height: 22px;
            text-align: left;
            font-style: normal;
            flex-shrink: 0;
          }
          .handle_tabel_bady_tb_value {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 10px;
            flex-wrap: wrap;
            white-space: pre-line;
          }
        }
      }
    }
  }
}
</style>